<template>
  <div class="about-page">
    <h1>{{ $t('about.title') }}</h1>
    
    <div class="about-two-columns">
      <div class="about-left">
        <img src="/images/avatar.jpg" alt="程序员工作场景" class="profile-large">
      </div>
      
      <div class="about-right">
        <div class="about-tabs">
          <div 
            v-for="(tab, index) in tabs" 
            :key="index"
            :class="['tab', { active: activeTab === index }]"
            @click="activeTab = index"
          >
            {{ $t(`about.tabs.${tabKeys[index]}`) }}
          </div>
        </div>
        
        <div v-if="activeTab === 0" class="about-content">
          <h2>{{ $t('about.intro.title') }}</h2>
          <p>{{ $t('about.intro.p1') }}</p>
          <p>{{ $t('about.intro.p2') }}</p>
        </div>
        
        <div v-if="activeTab === 1" class="skills-content">
          <h2>技能专长</h2>
          <div class="skills-horizontal">
            <div v-for="(skill, index) in skills" :key="index" class="skill-bar-container">
              <div class="skill-label">
                <span>{{ skill.name }}</span>
                <span class="skill-percentage">{{ skill.percentage }}%</span>
              </div>
              <div class="skill-progress-bar">
                <div class="skill-progress" :style="{ width: skill.percentage + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
        
        <div v-if="activeTab === 2" class="experience-content">
          <h2>工作经历</h2>
          <div class="experience-container">
            <div v-for="(item, index) in experience" :key="index" class="experience-item">
              <div class="experience-period">{{ item.period }}</div>
              <div class="experience-details">
                <div class="experience-header">
                  <h4 class="experience-title">{{ item.title }}</h4>
                  <span class="experience-company">{{ item.company }}</span>
                </div>
                <p v-if="item.description" class="experience-description">{{ item.description }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="stats-row">
          <div v-for="(stat, index) in stats" :key="index" class="stat-box">
            <div class="stat-number">{{ stat.value }}</div>
            <div class="stat-label">{{ $t(`about.stats.${statKeys[index]}`) }}</div>
          </div>
        </div>
        
        <a href="#" class="cv-download">
          <i class="fas fa-download"></i> {{ $t('about.downloadCV') }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabKeys: ['intro', 'skills', 'experience'],
      statKeys: ['years', 'projects', 'clients', 'sharing'],
      tabs: [
        { name: '个人介绍' },
        { name: '技能专长' },
        { name: '工作经历' }
      ],
      skills: [
        { name: 'Java', percentage: 95 },
        { name: 'Spring/SpringBoot', percentage: 90 },
        { name: '微服务架构', percentage: 85 },
        { name: '数据库设计', percentage: 88 },
        { name: 'DevOps', percentage: 75 }
      ],
      stats: [
        { value: '6+', label: '年工作经验' },
        { value: '20+', label: '完成项目' },
        { value: '1万+', label: '个人用户' },
        { value: '50+', label: '技术分享' }
      ],
      experience: [
        {
          period: '2023.1 - 至今',
          title: '客户信息管理岗',
          company: '中国人寿股份有限公司广东省分公司',
          description: ''
        },
        {
          period: '2019.6 - 2022.12',
          title: 'Java开发工程师',
          company: '中国人寿股份有限公司广东省分公司',
          description: ''
        },
        {
          period: '2018.6 - 2019.1',
          title: '图像算法研究员',
          company: '珠海市四维时代中德人工智能研究院',
          description: ''
        }
      ]
    }
  }
}
</script>

<style scoped>
.about-page {
  margin-top: 40px;
}

.about-two-columns {
  display: flex;
  gap: 50px;
  margin-top: 30px;
}

.about-left {
  flex: 1;
}

.about-right {
  flex: 1;
}

.profile-large {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-content, .skills-content, .experience-content {
  margin-bottom: 30px;
}

.about-tabs {
  display: flex;
  border-bottom: 2px solid #eee;
  margin-bottom: 30px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-right: 20px;
  transition: all 0.3s;
}

.tab.active {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: bold;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.stat-box {
  flex: 1;
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin: 0 10px;
}

.dark-mode .stat-box {
  background-color: #424242;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

.dark-mode .stat-label {
  color: #ccc;
}

.skills-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
}

.skill-bar-container {
  flex: 1 1 45%;
  min-width: 200px;
}

.skill-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.skill-percentage {
  color: var(--primary-color);
  font-weight: bold;
}

.skill-progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
}

.experience-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
}

.experience-item {
  display: flex;
  margin-bottom: 25px;
  align-items: flex-start;
}

.experience-period {
  min-width: 130px;
  font-weight: 500;
  color: var(--primary-color);
  margin-right: 20px;
  line-height: 1.5;
  padding-top: 2px;
}

.experience-details {
  flex: 1;
}

.experience-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 5px;
}

.experience-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-right: 10px;
  white-space: nowrap;
}

.experience-company {
  font-size: 1rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.experience-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
}

.cv-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  margin-top: 20px;
}

.cv-download:hover {
  color: var(--secondary-color);
}

@media (max-width: 992px) {
  .about-two-columns {
    flex-direction: column;
  }
  
  .about-left, 
  .about-right {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .stats-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .stat-box {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .experience-item {
    flex-direction: column;
  }
  
  .experience-period {
    margin-bottom: 8px;
    min-width: auto;
  }
  
  .experience-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .experience-title {
    margin-bottom: 5px;
    margin-right: 0;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .experience-header {
    display: flex;
    align-items: baseline;
  }
  
  .experience-title {
    font-size: 1rem;
  }
  
  .experience-company {
    font-size: 0.95rem;
  }
}
</style> 